<template>
  <!-- <nav>
    <ul>
      <li v-for="item in menuItems" :key="item.name" v-if="hasPermission(item.permission)">
        <router-link :to="item.route"> <FormOutlined /> {{ item.name }}</router-link>
      </li>
    </ul>
  </nav> -->
  <a-menu-item class="menu-item" v-for="(item, index) in role.permissions" :key="index"
    @click="$emit('menuChange',index)"><FormOutlined /> <router-link :to="route[item]"> &nbsp;{{ item }}</router-link></a-menu-item
  >
</template>

<script>
import { FormOutlined } from '@ant-design/icons-vue'
import { ref, defineProps  } from 'vue'
import roles from '@/utils/menu'
export default {
  props: {
    userRole: {
      type: Number,
      required: true,
    },
  },

  components: { FormOutlined },
  setup(props) {
    // const props = defineProps(['userRole'])
    // const userRole = props.userRole
    const role = roles[props.userRole]
    // console.log(role)
    const userRole = ref(props.userRole)
    const hasPermission = function (permission) {
      const role = this.roles.find((role) => role.name === this.userRole)
      return role.permissions.includes(permission)
    }
    const route = { 请假申请: '/apply', 请假审批: '/approve', 请假记录: '/record' }
    const menuItems = [
      { name: '请假申请', route: '/apply', permission: ['0', '1', '2'] },
      { name: '请假审批', route: '/approve', permission: ['1', '2'] },
      { name: '请假记录', route: '/record', permission: ['1', '2'] },
      // ... 其他菜单项
    ]
    return {
      menuItems,
      hasPermission,
      userRole,
      role,
      route,
    }
  },
  methods: {},
}
</script>
<style>
.menu-item {
  border-radius: 0 !important;
}
</style>
